<template>
  <section>
    <ui-title :title="$t('message.setting.cusMes.t8')" />

    <div class="set-send-time">
      <span>{{ $t('message.setting.cusMes.t9') }}</span>
      <el-select 
        v-model="reportSendTime" 
        @change="reportSendTimeHandler" 
        :placeholder="$t('common.base.pleaseSelect')"
      >
        <el-option 
          :value="item.value" 
          :label="item.label" 
          v-for="(item, idx) in reportSendTimeList" 
          :key="idx"
        >
        </el-option>
      </el-select>
      <el-button type="text" @click="openWorkTime">{{ $t('message.setting.cusMes.t10') }}</el-button>
    </div>

    <template v-if="sendDataList && sendDataList.length">
      <ui-title :title="$t('message.setting.cusMes.t11')" />

      <MessageTable 
        style="margin-top:24px;" 
        :show-external-column="false"
        v-model="sendDataList"
        :list-type="module"
        :report-send-time="reportSendTime"
        @getListByModule="getListByModule"
      />
    </template>
  </section>
</template>

<script>
import MessageTable from '../table/MessageTable'

import * as SettingApi from '@src/api/SettingApi';

import * as Message from '@src/api/Message';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { t } from '@src/locales'
export default {
  components:{
    MessageTable
  },

  data(){
    return{
      loading:false,

      module:'daily',

      reportSendTime: '',

      reportSendTimeList: [
        // {
        //   value: '07:00:00', 
        //   label: '7:00'
        // }, 
        // {
        //   value: '08:00:00', 
        //   label: '8:00'
        // }, 
        // {
        //   value: '09:00:00', 
        //   label: '9:00'
        // }, 
        // {
        //   value: '10:00:00', 
        //   label: '10:00'
        // }, 
        {
          value: '07:00:00', 
          label: '7:00'
        }, 
        {
          value: '08:00:00', 
          label: '8:00'
        }, 
        {
          value: '09:00:00', 
          label: '9:00'
        }, 
        {
          value: '10:00:00', 
          label: '10:00'
        }, 
        {
          value: '11:00:00', 
          label: '11:00'
        }, 
        {
          value: '12:00:00', 
          label: '12:00'
        }, 
        {
          value: '13:00:00', 
          label: '13:00'
        }, 
        {
          value: '14:00:00', 
          label: '14:00'
        }, 
        {
          value: '15:00:00', 
          label: '15:00'
        }, 
        {
          value: '16:00:00', 
          label: '16:00'
        }, 
        {
          value: '17:00:00', 
          label: '17:00'
        }, 
        {
          value: '18:00:00', 
          label: '18:00'
        }, 
      ],

      // 发送规则列表数据
      sendDataList:[],
    }
  },

  provide(){
    return {
      module:this.module,
      flowData: {}
    }
  },

  mounted(){
    this.getSubManageInfo()
    this.getListByModule()
  },
    
  methods:{
    getListByModule(){
      this.$emit('getListByModule', 'reportMessage', this.module)
    },
    // 子组件调用，更新数据
    updateList({sendDataList}){
      this.sendDataList = sendDataList
    },

    async reportSendTimeHandler(reportSendTime){
      try {
        const { status, message } = await Message.setReportSendTime({ reportSendTime });
        if (status !== 0) return this.$platform.notification({
          title: t('message.setting.cusMes.t12'),
          message: message || '',
          type: 'error'
        })
                
      } catch (error) {
        console.log(error);
      }
    },

    async getSubManageInfo(){
      try {
        const { status, data, message } = await SettingApi.getSubManageInfo();
        this.reportSendTime = data.reportSendTime;
      } catch (error) {
        console.log(error);
      }
    },

    openWorkTime(){
      let fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        fromId,
        type:PageRoutesTypeEnum.PageFeSettingWorkTime,
      });
    },
  }
}

</script>


<style lang="scss" scoped>
.switch-contain{
    margin:0 8px 0 12px;
}
.statue{
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    line-height: 22px;
}
.set-send-time{
    margin-top:12px;
    padding:0 0 10px 10px;
    border-bottom:1px dashed #E8E8E8;
    .el-select{
        margin-left:12px;
    }
    .el-button--text{
        margin-left:16px;
    }
}
</style>